<template>
    <div class="logIn">
        <div class="wrap">
            <div class="title">欢迎你</div>
            <input type="text" placeholder="请输入帐号" v-model="account">
            <input type="password" placeholder="请输入密码" v-model="password">
            <div class="login" @click="handleLogin">立即登录</div>
        </div>
        <img src="../../assets/images/close.png" class="close" @click="close">
    </div>
</template>

<script>
import { doLogin } from "../../api/user.js";
export default {
    name:'logIn',
    data() {
        return {
            account: "",
            password: ""
        }
    },
    mounted() {
    
    },
    methods: {
        handleLogin() {
            if (!this.account) {
                this.$toast({type: "danger", message: "请输入用户名"});
                return
            }
            if (!this.password) {
                this.$toast({type: "danger", message: "请输入密码"});
                return
            }
            doLogin({
                "loginNo": this.account,
                "loginPass": this.password,
            }).then(response=>{
                if(response.retCode=="200"){
                    localStorage.setItem("token", response.data)
                    if (sessionStorage.getItem("jumpurl")) {
                        this.$router.push(sessionStorage.getItem("jumpurl"));
                    } else {
                        this.$router.push({ name: "" });
                    }
                    
                }else{
                    this.$toast(response.retMsg);
                }
                
            });
        },
        close() {
            this.$router.push("/")
        }
    },
}

</script>

<style scoped lang="less">
.logIn {
    background: url(../../assets/images/login-bg.png) center center no-repeat;
    background-size: 100% 100%;
    height: 100%;
    .close {
        width: 18px;
        height: 18px;
        position: absolute;
        right: 27px;
        top: 32px;
    }

    .wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        .title {
            font-size: 30px;
            color: #fff;
            font-weight: bold;
            width: 320px;
            margin-bottom: 40px;
        }
        input {
            border-radius: 27.5px;
            border: none;
            background: #fff;
            font-size: 15px;
            width: 320px;
            height: 55px;
            padding-left: 26.5px;
            box-sizing: border-box;
            color: #BCBCBC;
            margin-bottom: 27px;
        }
        .login {
            width: 320px;
            height: 60px;
            background: #fff;
            border-radius: 30.5px;
            color: #FA622B;
            font-size: 18px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

}
</style>
